<template>
  <SysDialog
    :visible.sync="show"
    :title="title"
    width="500px"
    atob
    :showFullscreen="false"
  >
    <template>
      <el-form
        ref="formRef"
        :model="form"
        label-width="120px"
        label-position="left"
        size="small"
      >
        <!-- Source Name Type IPAddress Port UserName Password DBName-->
        <el-form-item label="Source Name：">
          <el-input
            class="w200"
            v-model="form.name"
            placeholder="Source Name"
          />
        </el-form-item>
        <el-form-item label="Source Type：">
          <el-select class="w200" v-model="form.type" placeholder="Source Type">
            <el-option
              v-for="item in sourceTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="IP Address：">
          <el-input
            class="w200"
            v-model="form.ipAddress"
            placeholder="IP Address"
          />
        </el-form-item>
        <el-form-item label="Port：">
          <el-input class="w200" v-model="form.port" placeholder="Port" />
        </el-form-item>
        <el-form-item label="User Name：" v-if="form.type !== '1'">
          <el-input
            class="w200"
            v-model="form.userName"
            placeholder="User Name"
          />
        </el-form-item>
        <el-form-item label="Password：" v-if="form.type !== '1'">
          <el-input
            class="w200"
            v-model="form.password"
            placeholder="Password"
          />
        </el-form-item>
        <el-form-item label="DB Name：" v-if="form.type !== '1'">
          <el-input class="w200" v-model="form.dbName" placeholder="DB Name" />
        </el-form-item>
      </el-form>
      <div class="flex-end">
        <el-button
          plain
          size="small"
          @click="handleDetect"
          :loading="detectLoading"
        >
          Detect
        </el-button>
      </div>

      <div class="flex-center-center" v-show="showDetect">
        <el-form
          ref="dbFormRef"
          :model="dbForm"
          label-width="90px"
          label-position="left"
          size="mini"
        >
          <el-form-item label="Well：">
            <el-select class="w200" v-model="dbForm.well" placeholder="Well">
              <el-option
                v-for="item in sourceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="WellBore：">
            <el-select
              class="w200"
              v-model="dbForm.wellbore"
              placeholder="WellBore"
            >
              <el-option
                v-for="item in sourceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Design：">
            <el-select
              class="w200"
              v-model="dbForm.design"
              placeholder="Design"
            >
              <el-option
                v-for="item in sourceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #button>
      <el-button plain size="small">OK</el-button>
      <el-button plain size="small" @click="show = false">Cancel</el-button>
    </template>
  </SysDialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { sourceType } from "./modules/source";
const emit = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});

const form = ref({
  name: "",
  type: "1",
  ipAddress: "",
  port: "",
  userName: "",
  password: "",
  dbName: "",
});

const dbForm = ref({
  well: "",
  wellbore: "",
  design: "",
});

const sourceTypeList = ref(sourceType);

const showDetect = ref(false);
const detectLoading = ref(false);

const title = computed(() => {
  return `${props.isEdit ? "Edit" : "New"} Source`;
});

const show = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

const handleDetect = () => {
  detectLoading.value = true;
  // 调用方法
  setTimeout(() => {
    showDetect.value = true;
    detectLoading.value = false;
  }, 1000);
};

watch(
  () => props.visible,
  (val) => {
    if (val) {
      showDetect.value = false;
      //   重置form
      form.value = {
        name: "",
        type: "1",
        ipAddress: "",
        port: "",
        userName: "",
        password: "",
        dbName: "",
      };
    }
  },
);
</script>

<style scoped lang="scss">
.w200 {
  width: 200px;
}
</style>
